lab components / Structure

Base Layout (New)

The Base Layout component establishes a standardized structure at the top of the UI, aiding user navigation, providing context, and offering quick access to essential actions.

Composition Examples Properties Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { BaseLayoutNew } from "@siteimprove/fancylab";

#Composition

The Base Layout is ideal for composing the following elements:

#Horizontal Navigation
Reserved for global actions and branding elements, maintaining consistent placement across the platform.
#Side navigation
The primary means for navigating the platform's core features and sections.
#Header
Contains the following elements:
- Page Title: Clearly identifies the current page or section, using the same label as the corresponding side navigation item for consistency. Keep titles concise and informative.
- Breadcrumbs (Optional): Display the user's navigation path within the platform, enhancing context and discoverability. Recommended for most pages unless the navigation is shallow.
- Utilities (Optional): Contextual actions or tools specific to the current page or section. Positioned based on their scope, with global utilities on the right and page-specific utilities on the left.
- Filters (Required): Enable users to refine and explore data on the page, improving discoverability. Prioritize the most frequently used filters and ensure they adapt to different screen sizes.
- Dashboard Picker (Optional): Allows users to personalize their view by selecting a preferred dashboard upon entering the platform.
- Alerts (Optional, Use Sparingly): Display critical system-wide messages that persist above the content area. Use sparingly to avoid overwhelming users.

#Examples

#Header base

Features a persistent page title, serving as a constant reference point for users throughout their navigation. Ensure consistency by using the same label from the side navigation as the page title.

CodeHTML output

<BaseLayoutNew id="content" pageHeader={<PageHeader title="Page title" />}>
	<></>
</BaseLayoutNew>

#Header with navigation

Includes breadcrumbs to provide users with a clear understanding of their navigation path and context. This is especially useful in more complex modules or sections of the platform.

CodeHTML output

<BaseLayoutNew
	id="content"
	pageHeader={
		<PageHeader
			title="Page title"
			breadcrumbs={{
				"aria-label": "Breadcrumbs",
				items: [
					{ title: "Level 1", url: "https://fancylib.netlify.app" },
					{ title: "Level 2", url: null },
				],
			}}
		/>
	}
>
	<></>
</BaseLayoutNew>

Presents utilities and actions for user interaction, positioned based on their scope: product-specific utilities on the left and global utilities on the right. Prioritize the most important actions for the current context.

Global utilities: Located on the far right, these are universal functions, such as export, search, settings, and similar features.
Product-specific utilities: Located on the far left, these are functionalities relevant to the current page or product users are interacting with.

CodeHTML output

<BaseLayoutNew
	id="content"
	pageHeader={
		<PageHeader
			title="Page title"
			utilities={{
				productSpecific: (
					<>
						<Button variant="borderless" aria-label="Icon only button">
							<Icon>
								<IconLearn />
							</Icon>
						</Button>
						<Button variant="primary">Primary action</Button>
						<Button variant="secondary">Secondary action</Button>
					</>
				),
				global: (
					<>
						<Button variant="borderless" aria-label="Icon only button">
							<Icon>
								<IconOptions />
							</Icon>
						</Button>
						<Button variant="borderless" aria-label="Icon only button">
							<Icon>
								<IconDownload />
							</Icon>
						</Button>
						<Button variant="borderless" aria-label="Icon only button">
							<Icon>
								<IconSettings />
							</Icon>
						</Button>
					</>
				),
			}}
		/>
	}
>
	<></>
</BaseLayoutNew>

#Properties

Social Media that have referred visitors to your website. Expand the table for referring social media pages, trend graphs, and entry pages.

CodePropsHTML output

Property	Description	Defined
idRequired	`string`ID for the main section of base layout	YesNo
childrenOptional	`element`elements to populate the base layout	YesNo
pageHeaderOptional	`element`optional page header element	YesNo

#Guidelines

#Do's

Focus on the most important actions for the current context.
Strictly adhere to Siteimprove's brand guidelines for colors, typography, and iconography.
Use ample white space to maintain a clean and uncluttered appearance.
Ensure a balanced distribution of elements throughout the header.
Reveal additional options or actions as needed, rather than displaying everything at once.

#Don'ts

Avoid overloading the header with too many features, which can distract users from core tasks.
Reserve alerts for truly critical, time-sensitive messages requiring immediate user attention.
Prioritize essential actions and consider moving less-used ones to dropdown menus or other locations.
Avoid hiding crucial actions behind unclear icons or gestures.

#Accessibility

For developers, ensure the header is accessible by adhering to the following best practices:

Breadcrumbs: Placed inside the <main> element. Make the breadcrumb container a <nav aria-label="Breadcrumbs">...</a>
Heading: Placed inside the <main> element. Make the heading an <h1> element.
Main content section: Use the <main> element for this (Note: A page must only have one <main> element). It must have id="content" and tabindex="-1" for the page's="Skip to main content" link to work.
Page toolbar: Placed inside the <main> element, This container should have role="group" and aria-label="Page toolbar"
Page filter: Placed inside the <main> element. This container should have role="group" and aria-label="Page filter"

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

Page Titles:

Use the same label from the side navigation for consistency.
Keep them short, informative, and in sentence case (e.g., "Account Settings").

Button Labels:

Employ action verbs (e.g., "Create," "Edit," "Delete").
Consult the Word list for approved terminology.

Alert Messages:

Prioritize clarity and conciseness.
Focus on the essential information users need to know.